<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Vue中常用的按键别名
1.回车 enter
2.删除 delete
3.退出 esc
4.空格 space
5.换行 tab  特殊必须配合keydown
6.上 up
7.下 down
8.左 left
9.右 right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

系统修饰键(用法特殊):crtl,alt,shift,meta  跟tab同理
1.配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
2.配合keydown使用，正常触发事件

也可以使用keyCode去指定具体的按键(不推荐)

Vue.confing.keycodes.自定义键名=键码  可以去定制按键别名-->
</head>
<body>
    <div id="root">
        <h2>{{name}}</h2>
        <!-- keydown按下去不用抬起来就触发事件 keyup按下去还得抬起来才触发事件 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showinfo">  <!--@keyup.crtl.y  点crtl和y才可以  -->
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.config.productionTip = false
        Vue.config.keyCodes.huiche=13  //设置回车键的名字为huiche
        new Vue({
            el:"#root",
            data:{
                name:'尚硅谷'
            },
            methods:{
                showinfo(e){
                   /*  if(e.keyCode!=13)
                    {
                        return
                    } */
                    console.log(e.target.value);
                    //console.log(e.key,e.keyCode);  //输出名字和数字
                }
            }
        })
    </script>
</body>
</html>